<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../font/iconfont.js"></script>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/cookie.js"></script>
    <!-- <script src="../js/ajax.js"></script> -->
    <!-- <script src="../js/api.js"></script> -->
    <style>
        .icon {
          width: 1em;
          height: 1em;
          vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box_l">
            <img src="../images/jpg/banner-login.jpg">
        </div>
        <div class="box_r">
            <div class="nav">
                <h2>
                    <img src="../images/png/milogo.png" alt=""><span>小米账号</span>
                </h2>
            </div>
            <form onsubmit="return false">
                <div class="dl">
                    <h3>账号登录</h3>
                    <p>
                        <input id="user" type="text" placeholder="用户名">
                    </p>
                    <p class="p2">
                        <input id="pwd" type="password" placeholder="密码"><span class="iconfont icon-yanjing_bi"></span>
                    </p>
                    <p><input id="btn" type="submit" value="登录"></p>
                    <p class="p1">
                        <a href="#" class="a1">忘记密码?</a>
                        <a href="#" class="a2">手机号登录</a>
                    </p>
                    <h4>其他方式登录</h4>
                    <table>
                        <tr>
                            <td>
                                <a href="#"><span class="iconfont icon-QQ"></span></a>
                            </td>
                            <td>
                                <a href="#"><span class="iconfont icon-weibo"></span></a>
                            </td>
                            <td>
                                <a href="#"><span class="iconfont icon-zhifubao"></span></a>
                            </td>
                            <td>
                                <a href="#">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-weixin"></use>
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
    </div>
</body>
<script>

    var userInp = document.getElementById("user");
    var userTips = document.getElementById("user_tips");

    var pwdInp = document.getElementById("pwd");
    var pwdTips = document.getElementById("pwd_tips");

    var btn = document.getElementById("btn");
    var eye = document.getElementsByClassName("iconfont icon-yanjing_bi")[0];
    
    btn.onclick = function () {
        // 用户输入的
        var user = userInp.value;
        var pwd = pwdInp.value;
        login({ user, pwd }).then(function (result) {
                if (result.status) {
                    alert(result.detail);
                    // location.href = "index.html";
                    setCookie("lgc", user, 31);
                    var search = location.search;
                    var returnUrl = search.split('=')[1];
                    if (returnUrl) { //有参数  => 回去
                        location.href = decodeURIComponent(returnUrl);
                    } else {
                        location.href = "./index.html";
                    }
                } else {
                    alert(result.detail);
                }
            }).catch(err => {
                throw err;
            })
    }

    eye.onclick = function(){
        if(this.getAttribute("class")=="iconfont icon-yanjing_bi"){
            this.setAttribute("class","iconfont icon-eye-fill");
            pwdInp.type = "text";
        }else{
            this.setAttribute("class","iconfont icon-yanjing_bi");
            pwdInp.type = "password";
        }
        
    }
</script>

</html>